.header
  background: $headerBg
  display: flex
  height: $headerHeight
  left: 0
  padding-left: $mainMenuWidth
  position: fixed
  right: 0
  top: 0
  transition: all .25s ease-in-out
  z-index: 500
  &__info
    border-left: 1px solid $headerBrd
    border-right: 1px solid $headerBrd
    color: $whiteColor
    @include blaseSizes()
      $width: getBladeContentSize($bladeSizeName)
      min-width: $width
      width: $width
  &__info2
    color: $whiteColor
    @include blaseSizes()
      min-width: 340px
      width: 340px
  &__nav
    display: flex
    margin-left: auto
    &-item
      align-items: center
      border-left: 1px solid $headerBrd
      cursor: pointer
      display: flex
      position: relative
      &:hover
        background-color: $headerBgOver
      &--opened
        background-color: $noticeIconColor !important
      &--opened
        .account-user__carret
          transform: rotate(180deg)
    &-ico
      background-position: 50% 50%
      background-repeat: no-repeat
      background-size: 20px
      height: 20px
      padding: 20px
      width: 20px
      &.__animated
        animation: bell ease-in-out 1s .5s
      &--warning
        background-image: url('../../../../images/header/warning.svg')
      &--settings
        background-image: url('../../../../images/header/settings.svg')
      &--help
        background-image: url('../../../../images/header/support.svg')
      &--notice
        background-image: url('../../../../images/header/notify_empty.svg')
        &-give
          background-image: url('../../../../images/header/notify.svg')

  // License
  .license
    align-items: center
    display: flex
    height: 100%
    padding: 0 20px
    &__text
      min-width: 220px
      white-space: normal
      font-size: 12px
      margin-right: 20px
    &.active
      cursor: pointer

  // Password expiry warning
  .password-expiry
    align-items: center
    display: flex
    height: 100%
    &__text
      white-space: normal
      font-size: 12px
      margin-right: 20px

  // Account user
  .account-user
    align-items: center
    box-sizing: border-box
    display: flex
    padding: 0 15px
    width: 325px
    &__img
      border-radius: 34px
      height: 34px
      margin-right: 15px
      width: 34px
    img
      border-radius: 34px
      object-fit: contain
      object-position: center
      width: 34px
      height: 34px
    &__name,
    &__role
      color: $whiteColor
      display: block
      font-size: 14px
    &__name,
    &__role
      color: #838d9a
    &__carret
      background: url('../../../../images/chevron.svg') no-repeat
      height: 7px
      margin-left: auto
      pointer-events: none
      width: 13px

  // Dropdowns
  .dropdown-menu
    background: $whiteColor
    border-bottom-left-radius: 4px
    border-bottom-right-radius: 4px
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.12)
    display: none
    min-width: 100%
    padding: 10px 0
    position: absolute
    right: 0
    top: 100%
    &__item
      color: $colorText
      display: block
      font-size: 14px
      font-weight: 500
      padding: 10px 15px
      &:hover
        background-color: darken($whiteColor, 2%)


  // Notifications
  .dropdown-menu.notifications
    padding: 12px 0 0 0
    overflow: auto
    width: 480px
  .notice
    &__bg
      background: url('../../../../images/notify_empty.png') no-repeat
      background-size: contain
      float: left
      height: 108px
      width: 144px
      margin: 0 16px
    &__t
      font-size: $fontSize
      font-weight: bold
      margin-bottom: 10px
    &__descr
      font-size: 14px
    .btn
      margin-right: 10px
      float: right
    &-list
      position: relative
      overflow-y: auto
      max-height: 600px
      &__item
        border-bottom: 1px solid $noticeBrd
        font-size: 14px
        padding: 10px 15px
        position: relative
        text-align: left
        display: flex
        flex-flow: row wrap
        justify-content: left
        align-items: center
        &:hover
          background-color: darken($whiteColor, 2%)
      &__ico
        background-color: $noticeIconBgColor
        border-radius: 50%
        width: 24px
        height: 24px
        padding: 8px
        display: flex
        justify-content: center
        &.error
          background-color: $noticeIconErrorBgColor
        &.progress
          background-color: $noticeIconProgressBgColor
        i
          font-size: 1.4rem
          color: $noticeIconColor
          margin-top: 2px
      &__content
        max-width: 309px
      &__date
        color: $noticeDateColor
        font-size: 11px
        position: absolute
        right: 15px
        top: 10px
      &__name
        font-weight: bold
        padding-left: 16px
        padding-right: 95px
      &__descr,
      &__errors
        padding-left: 16px
        font-size: 12px
        width: 285px
        white-space: normal
      &__errors
        color: $genericErrorColor
      .btn
        float: right
        margin: 20px 10px 0 0
      &__bar
        flex-basis: 100%
        height: 12px
        margin: 5px 0 0 55px

  .dropdown-menu.notifications .bottom-buttons
    box-shadow: inset 0px 2px 7px rgba(46, 61, 78, 0.1)
    background-color: #FBFDFE
    padding: 13px 12px 12px 12px
    text-align: right
    .btn-outline
      background: unset
      border: 1px solid $baseColor
      color: $baseColor
      margin-left: 4px

.header
  &__nav
    &-item
      &--opened
        .dropdown-menu
          display: block
